<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" :title="title"></uni-navbar></view>

		<view class="tab-nav">
			<view class="nav-item" :class="navItem == 1 ? 'active' : ''">基本信息填写</view>
			<view class="nav-item" :class="navItem == 2 ? 'active' : ''">正文内容填写</view>
		</view>

		<view class="form-box">
			<u-form :model="form" ref="uForm" :rules="rules">
				<block v-if="navItem == 1">
					<u-form-item class="form-item" required label="届次" labelAlign="left" label-width="190">{{ form.jieci }}</u-form-item>
					<u-form-item class="form-item" required label="标题" labelAlign="left" label-width="190" prop="title" style="border-bottom: 0;">
						<u-input v-model="form.title" type="text" :maxlength="30" placeholder="请输入标题" />
					</u-form-item>

					<uni-view class="title-tip">关于......的建议，标题仅需填写“......”的内容</uni-view>
					<u-form-item class="form-item" required label="分类" labelAlign="left" label-width="190" prop="type">
						<u-input v-model="type" type="select" :select-open="typeShow" placeholder="请选择分类" @click="typeShow = true" />
						<u-select :list="typeList" v-model="typeShow" @confirm="typeConfirm"></u-select>
					</u-form-item>
					<u-form-item class="form-item" required label="类型" labelAlign="left" label-width="190" prop="kind">
						<u-input v-model="kind" type="select" :select-open="kindShow" placeholder="请选择分类" @click="kindShow = true" />
						<u-select :list="kindList" v-model="kindShow" @confirm="kindConfirm"></u-select>
					</u-form-item>

					<block v-if="form.kind != 2">
						<u-form-item
							class="form-item"
							required
							label="建议人"
							labelAlign="left"
							label-width="190"
							v-if="$roleCodes('sys_manager') || ($roleCodes('motion_allpermissions') || $roleCodes('zhuanweihui'))"
						>
							<u-input v-model="waihotsName" type="select" :select-open="waihotsShow" placeholder="请选择建议人" @click="waihotsShow = true" />
							<select-tree
								ref="waihotsTree"
								:show="waihotsShow"
								:range="waihotsList"
								:selected="waihotsStr"
								:multiple="false"
								:selectParent="false"
								@confirm="treeConfirm($event, 'waihots')"
								@cancel="treeCancel($event, 'waihots')"
							></select-tree>
						</u-form-item>

						<u-form-item class="form-item" label="建议人" labelAlign="left" label-width="190" v-else-if="$roleCodes('weiyuan')">{{ form.leaderName }}</u-form-item>
						<u-form-item class="form-item" required label="联系电话" labelAlign="left" label-width="190" prop="leaderPhone">
							<u-input v-model="form.leaderPhone" type="text" placeholder="请输入手机号" />
						</u-form-item>
						<u-form-item class="form-item" required label="单位职务" labelAlign="left" label-width="190" prop="leaderPosition">
							<u-input v-model="form.leaderPosition" type="text" placeholder="请输入单位和职务" />
						</u-form-item>
						<u-form-item class="form-item" required label="通讯地址" labelAlign="left" label-width="190" prop="leaderAddress">
							<u-input v-model="form.leaderAddress" type="text" placeholder="请输入通讯地址" />
						</u-form-item>
					</block>
					<block v-else>
						<u-form-item class="form-item" required label="单位类型" labelAlign="left" label-width="190">
							<u-input v-model="reflectUnitType" type="select" :select-open="refTypeShow" placeholder="请选择单位类型" @click="selectShow('refTypeShow')" />
							<u-select :list="refTypeList" v-model="refTypeShow" @confirm="refTypeConfirm"></u-select>
						</u-form-item>
						<u-form-item class="form-item" required label="集体单位" labelAlign="left" label-width="190" prop="collectiveOrgan">
							<u-input v-model="reflectUnit" type="select" :select-open="refShow" placeholder="请选择集体单位" @click="selectShow('refShow')" />
							<u-select :list="refList" v-model="refShow" @confirm="refConfirm"></u-select>
						</u-form-item>
						<u-form-item class="form-item" required label="单位电话" labelAlign="left" label-width="190" prop="coTel">
							<u-input v-model="form.coTel" type="text" placeholder="请输入单位电话" />
						</u-form-item>
						<u-form-item class="form-item" required label="单位地址" labelAlign="left" label-width="190" prop="coAddress">
							<u-input v-model="form.coAddress" type="text" placeholder="请输入单位地址" />
						</u-form-item>
						<u-form-item class="form-item" label="单位职称" labelAlign="left" label-width="190">
							<u-input v-model="form.coZhicheng" type="text" placeholder="请输入单位职称" />
						</u-form-item>
					</block>

					<u-form-item class="form-item" required label="联名人" labelAlign="left" label-width="190" v-if="form.kind == 3">
						<u-input v-model="lmName" type="select" :select-open="lmShow" placeholder="请选择联名人" @click="lmShow = true" />
						<select-tree ref="lmTree" :show="lmShow" :range="lmList" :selected="lmStr" @confirm="treeConfirm($event, 'lm')" @cancel="treeCancel($event, 'lm')"></select-tree>
					</u-form-item>
					<u-form-item class="form-item" label="提交日期" labelAlign="left" label-width="190">{{ timer }}</u-form-item>
				</block>
				<block v-else key="background">
					<u-form-item class="form-item" required label="建议正文" labelAlign="left" label-width="190" prop="background">
						<u-input v-model="form.background" type="textarea" placeholder="请输入建议正文" :clearable="false" :height="160" :maxlength="-1" />
					</u-form-item>

					<view class="ocr-box">
						<view class="ocr" @click="ocrTo('image', 'background')">
							<image src="/static/img/icon_90.png" mode="widthFix"></image>
							<view>图片识别</view>
						</view>
						<view class="ocr" @click="ocrTo('audio', 'background')">
							<image src="/static/img/icon_91.png" mode="widthFix"></image>
							<view>文字识别</view>
						</view>
					</view>

					<u-form-item class="form-item" label="上传文件" labelAlign="left" label-width="190"><uni-file-upload width="500rpx"></uni-file-upload></u-form-item>

					<!-- <u-form-item class="form-item" label="主办单位" labelAlign="left" label-width="190">
						<u-input v-model="zbName" type="select" :select-open="zbShow" placeholder="请选择主办单位" @click="zbShow = true" />
						<select-tree
							ref="zbTree"
							:show="zbShow"
							:range="zbList"
							:selected="zbStr"
							rangeKey="deptName"
							:multiple="false"
							:selectParent="false"
							@confirm="treeConfirm($event, 'zb')"
							@cancel="treeCancel($event, 'zb')"
						></select-tree>
					</u-form-item> -->
					<u-form-item class="form-item" label="承办单位" labelAlign="left" label-width="190">
						<u-input v-model="xbName" type="select" :select-open="xbShow" placeholder="请选择希望承办单位" @click="xbShow = true" />
						<select-tree
							ref="xbTree"
							:show="xbShow"
							:selected="xbStr"
							:range="xbList"
							rangeKey="deptName"
							@confirm="treeConfirm($event, 'xb')"
							@cancel="treeCancel($event, 'xb')"
						></select-tree>
					</u-form-item>

					<u-form-item class="form-item" label="是否公开" labelAlign="left" label-width="190">
						<u-radio-group v-model="isOpen">
							<u-radio v-for="(item, index) in openList" :key="index" :name="item.name">{{ item.value }}</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item class="form-item" required label="理由" labelAlign="left" label-width="190" prop="noOpenReason" v-if="isOpen == 0" key="noOpenReason">
						<u-input v-model="form.noOpenReason" type="text" placeholder="请输入不公开理由" />
					</u-form-item>
				</block>
			</u-form>
		</view>

		<view class="fiexd-btm">
			<u-button class="form-btn" v-if="navItem == 1" type="error" @click="confirm">下一步</u-button>
			<view v-else class="flex-box">
				<u-button class="form-btn" type="error" @click="confirm">提交</u-button>
				<u-button class="form-btn" type="success" @click="spare">草稿</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import uniFileUpload from '@/components/uni-file-uploader.vue';
import dateTimePicker from '@/components/uni-datetime-picker';
import selectTree from '@/components/uni-select-tree.vue';
import { mapState } from 'vuex';
export default {
	components: {
		dateTimePicker,
		uniFileUpload,
		selectTree
	},
	data() {
		return {
			id: '',
			title: '提交建议',
			navItem: 1,
			ocrKey: '',
			commitFlag: true,
			dept: '',
			timer: '',
			disabled: false,

			type: '',
			typeShow: false,
			typeList: [],

			kind: '',
			kindShow: false,
			kindList: [
				{
					value: '1',
					label: '个人建议'
				},
				{
					value: '3',
					label: '联名建议'
				}
			],

			reflectUnit: '',
			refShow: false,
			refList: [],

			reflectUnitType: '',
			refTypeShow: false,
			refTypeList: [],

			lmIds: [],
			lmName: '',
			lmShow: false,
			lmList: [],
			lmStr: '',

			// zbIds: [],
			// zbName: '',
			// zbShow: false,
			// zbList: [],
			// zbStr: '',

			xbIds: [],
			xbName: '',
			xbShow: false,
			xbList: [],
			xbStr: '',

			waihotsIds: [],
			waihotsName: '',
			waihotsShow: false,
			waihotsList: [],
			waihotsStr: '',

			isOpen: '3',
			openList: [
				{
					name: '0',
					value: '不公开'
				},
				{
					name: '3',
					value: '公开'
				}
			],

			form: {
				id: null,
				jieci: null,
				title: null,
				type: null,
				kind: null,
				waihots: null,
				hopeBldw: null,
				hopeBldwName: null,
				hopeBldwXb: null,
				hopeBldwXbList: [],
				leaderPhone: null,
				leaderAddress: null,
				leaderPosition: null,
				leader: null,
				noOpenReason: null,
				motionDate: null,
				nodeStatus: '1',
				collectiveOrgan: null,
				reflectUnitType: null,
				coAddress: null,
				coTel: null,
				coZhicheng: null,
				suggestion: null,
				cause: null,
				content: null,
				background: null,
				isOpen: null
			},
			rules: {
				title: [
					{
						required: true,
						message: '请输入标题',
						trigger: 'change'
					}
				],
				leaderPhone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change']
					}
				],
				type: [
					{
						required: true,
						message: '请选择分类',
						trigger: 'change'
					}
				],
				kind: [
					{
						required: true,
						message: '请选择类型',
						trigger: 'change'
					}
				],
				leader: [
					{
						required: true,
						message: '请输入建议人',
						trigger: 'change'
					}
				],
				leaderPosition: [
					{
						required: true,
						message: '请输入单位职务',
						trigger: 'change'
					}
				],
				leaderAddress: [
					{
						required: true,
						message: '请输入通讯地址',
						trigger: 'change'
					}
				],
				collectiveOrgan: [
					{
						required: true,
						message: '请输入集体单位',
						trigger: 'change'
					}
				],
				coAddress: [
					{
						required: true,
						message: '请输入单位地址',
						trigger: 'change'
					}
				],
				coTel: [
					{
						required: true,
						message: '请输入单位电话',
						trigger: 'change'
					}
				],
				coZhicheng: [
					{
						required: true,
						message: '请输入单位职称',
						trigger: 'change'
					}
				],
				noOpenReason: [
					{
						required: true,
						message: '请输入不公开理由',
						trigger: 'change'
					}
				],
				motionDate: [
					{
						required: true,
						message: '请选择提交日期',
						trigger: 'change'
					}
				],
				background: [
					{
						required: true,
						message: '请输入建议正文',
						trigger: 'change'
					}
				],
				hopeBldw: [
					{
						required: true,
						message: '请选择主办单位',
						trigger: 'change'
					}
				]
			}
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.loadDict('motion_type', 'typeList');
		this.loadDict('reflect_unit_type', 'refTypeList');
		this.loadTeam('weiyuan, changwei');
		this.loadHandler();
		this.$store.commit('filePush', []);
		if (option && option.id) {
			this.id = option.id;
			if (option.type == 'clue') {
				this.form.motionClueId = option.id;
				this.clueData();
			} else if (option.type == 'spare') {
				this.title = '修改建议';
				this.spareData();
			}
		}

		uni.setNavigationBarTitle({
			title: this.title
		});
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onUnload() {
		this.$store.commit('filePush', []);
	},
	computed: {
		...mapState(['userInfo', 'fileList'])
	},
	methods: {
		loadLogin() {
			let time = this.$writeCurrentDate();
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
				this.dept = this.userInfo.deptName;
				this.timer = time.year + '年' + time.month + '月' + time.date + '日';
				this.form.waihots = this.userInfo.sysUser.id;
				this.form.jieci = this.userInfo.jieCi.pName + this.userInfo.jieCi.name;
				this.form.leaderAddress = this.userInfo.userInfo.address;
				this.form.leaderPosition = this.userInfo.userInfo.position;
				this.form.leaderPhone = this.userInfo.userInfo.phoneNumber;
				this.form.leaderName = this.userInfo.sysUser.userName;
				this.form.createBy = this.userInfo.sysUser.id;
				this.form.leader = this.userInfo.sysUser.id;
				this.form.motionDate = time.year + '-' + time.month + '-' + time.date;

				if (this.$sysBtns('tajiti')) {
					this.kindList.push({
						value: '2',
						label: '集体建议'
					});
				}
				if (!this.$roleCodes('motion_allpermissions') && !this.$roleCodes('zhuanweihui') && this.$roleCodes('fydw') && this.userInfo.sysUser.remark1) {
					this.kindList = [
						{
							value: '2',
							label: '集体建议'
						}
					];
				}
			} else {
				this.$logout();
			}
		},
		kindGroupChange(e) {
			this.form.kind = e;
		},
		selectShow(e) {
			if (this.disabled) {
				return false;
			}
			this[e] = true;
		},
		treeConfirm(e, type) {
			if (!e || e.length == 0) {
				this[type + 'Show'] = false;
				this[type + 'Name'] = '';
				this[type + 'Ids'] = [];
				return false;
			}
			if (type == 'zb') {
				this[type + 'Ids'] = e[0].id;
				this.form.hopeBldw = e[0].id;
				this[type + 'Name'] = e[0].deptName;
			} else if (type == 'waihots') {
				this[type + 'Ids'] = e[0].id;
				this.waihotsName = e[0].name;
				this.form.leader = e[0].id;
				this.form.leaderName = e[0].name;
				this.form.leaderPhone = e[0].phone;
				this.form.leaderPosition = e[0].position;
				this.form.leaderAddress = e[0].address;
			} else if (type == 'xb') {
				this[type + 'Ids'] = [];
				let names = [];
				let i = 0;
				e.forEach(item => {
					this[type + 'Ids'].push(item.id);
					if (i < 2) {
						names.push(item.deptName);
						i++;
					}
				});
				this[type + 'Name'] = names.join(',') + '等' + e.length + '个';
			} else {
				this[type + 'Ids'] = [];
				let names = [];
				let i = 0;
				e.forEach(item => {
					this[type + 'Ids'].push(item.id);
					if (i < 2) {
						names.push(item.name);
						i++;
					}
				});
				this[type + 'Name'] = names.join(',') + '等' + e.length + '人';
			}
			this[type + 'Show'] = false;
		},
		treeCancel(e, type) {
			this[type + 'Show'] = false;
		},
		timeChange({ date, dt }, idx) {
			this.form[idx] = date.year + '-' + date.month2 + '-' + date.day2;
		},
		typeConfirm(e) {
			this.type = e[0].label;
			this.form.type = e[0].value;
		},
		refConfirm(e) {
			this.reflectUnit = e[0].label;
			this.form.collectiveOrgan = e[0].value;
		},
		refTypeConfirm(e) {
			this.reflectUnitType = e[0].label;
			this.form.reflectUnitType = e[0].value;
			this.reflectUnit = '';
			this.form.collectiveOrgan = null;
			this.loadDict('reflect_unit_type_' + e[0].value, 'refList');
		},
		kindConfirm(e) {
			this.kind = e[0].label;
			this.form.kind = e[0].value;
		},
		loadDict(type, list) {
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then(res => {
				if (!res.data) {
					return false;
				}
				this[list] = [];
				res.data.forEach(item => {
					this[list].push({
						value: item.dictValue,
						label: item.dictName
					});
					let unit2 = this.userInfo.sysUser.remark1;
					let unit1 = unit2 && unit2.split('_')[0];
					if (type == 'reflect_unit_type' && unit2) {
						if (unit1 == item.dictValue) {
							this.reflectUnitType = item.dictName;
							this.form.reflectUnitType = item.dictValue;
							this.loadDict('reflect_unit_type_' + item.dictValue, 'refList');
						}
					}
					if (type.indexOf('reflect_unit_type_') != -1 && unit2) {
						if (unit2 == item.dictValue) {
							this.disabled = true;
							this.reflectUnit = item.dictName;
							this.form.collectiveOrgan = item.dictValue;
						}
					}
				});
			});
		},
		loadHandler() {
			this.$request('/system/sys-dept/allHandler2', {
				clientCode: this.clientCode,
				currentUserId: this.userId,
				sanshenFlag: '1'
			}).then(res => {
				// this.zbList = res.data;
				this.xbList = res.data;
			});
		},
		clueData() {
			this.$request('/tianbanli/motion-clue/detail', {
				id: this.id,
				userId: this.userId
			}).then(res => {
				this.$store.commit('filePush', res.data.fileList);
				this.form.title = res.data.motionClue.title;
				let regx = /<[^>]*>|<\/[^>]*>/gm;
				if (res.data.motionClue.content) {
					this.form.background = res.data.motionClue.content.replace(regx, '');
				}
				this.typeList.forEach(item => {
					if (res.data.motionClue.type == item.value) {
						this.type = item.label;
						this.form.type = item.value;
					}
				});
				this.kindList.forEach(item => {
					if (res.data.motionClue.kind == item.value) {
						this.kind = item.label;
						this.form.kind = item.value;
					}
				});
			});
		},
		spareData() {
			this.joinList();
			this.$request('/motion/query', {
				id: this.id,
				currentUserId: this.form.waihots
			}).then(res => {
				let time = this.$writeCurrentDate();
				// Object.assign(this.form, res.data.motion);
				Object.keys(this.form).forEach(key => (this.form[key] = res.data.motion[key]));
				this.$store.commit('filePush', res.data.fileList);
				this.timer = time.year + '年' + time.month + '月' + time.date + '日';
				this.form.motionDate = time.year + '-' + time.month + '-' + time.date;
				this.form.jieci = res.data.motion.jieName + res.data.motion.ciName;
				this.form.nodeStatus = '1';

				let regx = /<[^>]*>|<\/[^>]*>/gm;
				this.isOpen = this.form.isOpen;
				if (this.form.background) {
					this.form.background = this.form.background.replace(regx, '');
				}
				if (this.form.content) {
					this.form.content = this.form.content.replace(regx, '');
				}
				if (this.form.cause) {
					this.form.cause = this.form.cause.replace(regx, '');
				}
				if (this.form.suggestion) {
					this.form.suggestion = this.form.suggestion.replace(regx, '');
				}
				if (this.form.hopeBldw) {
					this.zbStr = this.form.hopeBldw;
					this.zbIds = this.form.hopeBldw;
					this.zbName = this.form.hopeBldwName ? this.form.hopeBldwName : '';
				}
				if (this.form.hopeBldwXb) {
					this.xbStr = this.form.hopeBldwXb;
					this.treeConfirm(this.form.hopeBldwXbList, 'xb');
				}
				this.typeList.forEach(item => {
					if (res.data.motion.type == item.value) {
						this.type = item.label;
						this.form.type = item.value;
					}
				});
				this.kindList.forEach(item => {
					if (res.data.motion.kind == item.value) {
						this.kind = item.label;
						this.form.kind = item.value;
						if (item.value == 2) {
							this.refList.forEach(item => {
								if (res.data.motion.collectiveOrgan == item.value) {
									this.reflectUnit = item.label;
									this.form.collectiveOrgan = item.value;
								}
							});
						} else {
							this.waihotsName = this.form.leaderName;
							this.waihotsStr = this.form.leader + '';
							this.waihotsIds = this.form.leader;
							this.form.leader = this.form.leader;
						}
					}
				});
			});
		},
		loadTeam(type) {
			this.$request('/system/sys-user/team_users', {
				clientCode: this.clientCode,
				currentUserId: this.userId,
				fromModule: 'motion',
				roleCodes: type,
				teamType: '2'
			}).then(res => {
				this.lmList = res.data;
				this.waihotsList = res.data;
			});
		},
		joinList() {
			this.$request('/motion/jointlyers/list', {
				clientCode: this.clientCode,
				motionJointlyers: { motionId: this.id, signFlag: '' }
			}).then(res => {
				this.lmIds = [];
				let names = [];
				let i = 0;
				res.data.records.forEach(item => {
					this.lmIds.push(item.userId);
					if (i < 2) {
						names.push(item.userName);
						i++;
					}
				});
				this.lmStr = this.lmIds.join(',');
				this.lmName = names.join(',') + '等' + this.lmIds.length + '人';
			});
		},
		onEditorReady(edit) {
			this.$refs.editor
				.context(res => {
					this[edit] = res.context;
				})
				.exec();
		},
		spare() {
			this.commitFlag = false;
			this.form.nodeStatus = '0';
			this.confirm();
		},
		ocr(key) {
			this.ocrKey = key;
		},
		ocrTo(e, key) {
			this.ocrKey = key;
			uni.navigateTo({
				url: '/pagesB/ocr/index?ocrKey=' + this.ocrKey + '&type=' + e
			});
		},
		confirm(type) {
			if (this.navItem == 1) {
				this.$refs.uForm.validate(valid => {
					if (!valid) {
						return false;
					} else if (this.form.kind == 3 && this.lmIds.length < 1) {
						this.$msg('请选择联名人');
					} else if (
						(this.$roleCodes('sys_manager') || this.$roleCodes('motion_allpermissions') || this.$roleCodes('zhuanweihui')) &&
						this.form.kind != 2 &&
						this.waihotsIds.length < 1
					) {
						this.$msg('请选择建议人');
						return false;
					} else {
						this.navItem = 2;
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 0
						});
					}
				});
			} else {
				this.$refs.uForm.validate(valid => {
					if (!valid) {
						return false;
					} else {
						let data = {};
						let reg = /^(关于).*(建议)$/g;
						if (!reg.test(this.form.title)) {
							this.form.title = '关于' + this.form.title + '的建议';
						}
						this.form.clientCode = this.clientCode;
						this.form.isOpen = this.isOpen;
						this.form.hopeBldwXb = this.xbIds.join(',');

						if (this.id) {
							this.form.motionClueId = this.id;
						}
						// if (this.xbIds.indexOf(this.zbIds) != -1) {
						// 	this.$msg('选为主办单位的不能再被选为承办单位!');
						// 	return false;
						// }

						data = {
							motionClue: this.motionClue,
							motion: this.form,
							fileList: this.fileList,
							jointlyers: this.lmIds.join(','),
							commitFlag: this.commitFlag
						};

						this.$request('/motion/add', data, {
							load: true
						}).then(res => {
							this.$msg(res.msg);
							setTimeout(() => {
								let pre = this.$prePage();
								if (pre && pre.loadData) {
									pre.loadData('refresh');
								}
								if (pre && pre.loadAll) {
									pre.loadAll();
								}
								uni.navigateBack();
							}, 500);
						});
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	background-color: #fff;
}

.form-box {
	.form-item {
		display: block;
		padding: 0 30rpx;
		border-bottom: 20rpx solid #f5f7fa;
	}

	.title-tip {
		display: block;
		padding: 30rpx;
		font-size: 15px;
		color: rgb(255, 113, 0);
		text-align: center;
		border-bottom: 20rpx solid #f5f7fa;
	}
}

.fiexd-btm {
	position: static;
	padding: 30rpx;

	.form-btn {
		width: 100%;
	}

	.flex-box .form-btn {
		width: 48%;
	}
}
</style>
